import React from 'react'
import {Card, Icon, Popconfirm, Tag, Typography} from 'antd'
import { Link } from 'react-router-dom'
import getStatusColor from '../../constant/subscription-status'

const {Meta} = Card
const {Paragraph} = Typography
const SerialBox = ({serial, needManagement, deleteSerial, subscribed}) => {
  const status = serial.isPublic ? '公开' : '需订阅'

  const getVideoCount = () => {
    if (serial.count !== undefined) return serial.count
    return serial.videos.length
  }

  return <Link to={`/serials/${serial.id}`}>
    <Card className='serial-card'
      actions={needManagement ? [
        <Link to={`/serials-management/serials/${serial.id}/preview`}>
          <Icon type='eye' />
        </Link>,
        <Link to={`/serials-management/serials/${serial.id}/edit`}>
          <Icon type='edit' />
        </Link>,
        <Popconfirm
          title='确定删除？'
          onConfirm={() => { deleteSerial(serial.id) }}
          okText='确定'
          cancelText='取消'
            >
          <Icon style={{color: 'red'}} type='delete' />
        </Popconfirm>
      ] : []}
      cover={
        <div style={{height: '150', overflow: 'hidden'}}>
          {
            subscribed
              ? ''
              : <Tag color={getStatusColor(status)} className='status-tag'>
                {status}
              </Tag>
          }
          <img alt='图片链接失效' className='cover-image' src={serial.coverUrl} width='100%' />
        </div>
    }>
      <Meta title={<b>{serial.title}</b>}
        description={
          <div>
            <Paragraph className='serial-introduce' ellipsis>
              {serial.description}
            </Paragraph>
            <div>
              <span><Icon type='solution' /> {serial.username}</span>
              <span style={{float: 'right'}}><Icon type='folder-open' /> {getVideoCount()} 个视频</span>
            </div>
          </div>
          } />
    </Card>
  </Link>
}

export default SerialBox
